<template>
	<view class="longbingbing-coach-recommend-page">
<!--    ml-md mr-md -->
		<view
			:class="[{ 'pt-lg pl-lg pr-md pb-lg': recommend_style !== 3 },{'pl-md pr-md':recommend_style===3}]"
			:style="{ color: recommend_style === 3 ? primaryColor : '' }"
			v-if="recommend_list && recommend_list.length > 0" style="padding: 16rpx;">
			<view @tap.stop="$util.goUrl({url: `/pages/technician`,openType: `reLaunch`})" class="flex-between"
				:class="[{'pt-md':recommend_style===3}]" style="padding: 16rpx 0;">
				<view class="c-black flex-y-center f-sm-title recommend-master"
					:class="[{'f-paragraph':recommend_style!==3},{'f-title':recommend_style===3}]">
          <!-- <img src="../static/img/serviceImg/jishi.png" class="mr-md"> -->
          <view style="font-size: 30rpx;color: #333;font-weight: 500;">
					  {{o.data.title}}
          </view>
				</view>
				<view class="flex-y-center f-caption c-caption" :style="{color:recommend_style===3?primaryColor:''}">
				  更多技师<i class="iconfont icon-right" style="font-size: 24rpx;"></i>
				</view>
			</view>
			<scroll-view scroll-x class="longbingbing-recommend-technician"
				:style="{width:recommend_style===3?'710rpx':'650rpx'}">
				<block v-for="(item,index) in recommend_list" :key="index">
					<view @tap.stop="toTechnician(index)" class="longbingbing-recommend-item type-1"
						v-if="recommend_style == 1" style="width: 176rpx;height: 240rpx;border-radius: 24rpx;">
						<!-- #ifdef H5  -->
						<view class="">
<!--              item.work_img-->
							<!--<view class="h5-image cover"
								:style="{ backgroundImage : item.work_img }" style="width: 176rpx;height: 148rpx;border-radius: 24rpx 24rpx 0 0;">
							</view>-->
						<image lazy-load class="cover radius-8" :src="item.work_img" style="width: 176rpx;height: 148rpx;border-radius: 24rpx 24rpx 0 0;"></image>
						</view>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image mode="aspectFill" lazy-load class="cover radius-8" :src="item.work_img" style="width: 176rpx;height: 148rpx;"></image>
						<!-- #endif -->
						<view class=" f-desc c-title text-bold p-10" style="padding: 16rpx 20rpx;">
							<view class="ellipsis" style="color: #333;font-size: 24rpx;">{{item.coach_name}}</view>
              <view class="flex-center f-icontext" v-if="item.is_new">
                <view class="new-technician flex-center pr-sm pl-sm"
                      :style="{color:primaryColor,border:`1rpx solid ${primaryColor}`}">
                  新人
                </view>
              </view>
              <view class=" f-icontext c-caption" v-else style="font-size: 20rpx;font-weight: 400;">
                <view>
                  单量<text class="num">{{item.order_count | handleFormatNum}}</text>单
                </view>
              </view>
						</view>
					</view>
					<view @tap.stop="toTechnician(index)" class="longbingbing-recommend-item type-2 pd-md"
						v-if="recommend_style == 2">
						<view class="flex-center pb-sm">
							<!-- #ifdef H5 -->
							<view class="cover radius">
								<view class="h5-image cover radius"
									:style="{ backgroundImage : `url('${item.work_img}')`}">
								</view>
							</view>
							<!-- #endif -->
							<!-- #ifndef H5 -->
							<image mode="aspectFill" lazy-load class="cover radius" :src="item.work_img"></image>
							<!-- #endif -->
							<view class="flex-1 ml-sm">
								<view class="f-desc ellipsis">{{item.coach_name}}</view>
								<view class="flex-y-baseline" style="margin-top: 4rpx;">
									<i class="iconfont iconyduixingxingshixin icon-font-color"></i>
									<view class="star-text flex-y-center f-caption">{{item.star}}</view>
								</view>
							</view>
						</view>
						<view class="flex-center">
							<view class="new-technician flex-center f-icontext"
								:style="{color:primaryColor,border:`1rpx solid ${primaryColor}`}" v-if="item.is_new">新人
							</view>
							<view class="f-icontext c-caption" v-else>单量{{item.order_count | handleFormatNum}}
							</view>
						</view>
					</view>
					<view @tap.stop="toTechnician(index)" class="longbingbing-recommend-item type-3 fill-base rel"
						v-if="recommend_style === 3">
						<view class="abs status-tag flex-center f-icontext c-base"
							:style="{background: btn_config[item.text_type*1-1].btn_color,color:btn_config[item.text_type*1-1].font_color}"
							v-if="item.text_type*1">
							{{btn_config[item.text_type*1-1].text}}
						</view>
						<!-- #ifdef H5 -->
						<view class="cover radius">
							<view class="h5-image cover radius" :style="{ backgroundImage : `url('${item.work_img}')`}">
							</view>
						</view>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image mode="aspectFill" lazy-load class="cover radius" :src="item.work_img"></image>
						<!-- #endif -->
						<view class="pd-md flex-center flex-column">
							<view class="f-desc c-title ellipsis">{{ item.coach_name }}</view>
							<view class="flex-y-center f-caption c-title" style="margin-top: 4rpx">
								<view style="color: rgba(34, 39, 36, 0.6); margin-right:4rpx">
									单量
								</view>
								<view class="text-bold" style="color: #ff6d00">
									{{ item.order_count | handleFormatNum}}
								</view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		props: {
			o: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {}
		},
		computed: mapState({
			btn_config: state => state.config.configInfo.btn_config,
			recommend_style: state => state.service.recommend_style,
			recommend_list: state => state.service.recommend_list,
		}),
		methods: {
			...mapMutations(['updateUserItem']),
			async toTechnician(index) {
				let {
					id,
					city_id,
					coach_name
				} = this.recommend_list[index]
				let check = await this.$util.toCheck()
				if (!check) return
				this.$util.goUrl({
					url: `/user/pages/technician-info?id=${id}`
				})
			}
		},
		filters: {
			handleFormatNum(val) {
				let text = val
				if (val > 9999) {
					let num = val % 10000
					let num1 = parseInt(val / 10000)
					if (num) {
						text = `${num1}w+`
					} else {
						text = `${num1}w`
					}
				}
				return text
			}
		}
	}
</script>

<style scoped lang="scss">
	.longbingbing-coach-recommend-page {
		background-color: #F7F5F5;

    .recommend-master {
      font-weight: 500;
      color: #2c3e50;
      img {
        height: 38rpx;
        width: 38rpx;
      }
    }

		.longbingbing-recommend-technician {
			white-space: nowrap;

			.longbingbing-recommend-item {
				background-color: #fff;
				border-radius: 12rpx;
				display: inline-block;
			}

			.longbingbing-recommend-item.type-1 {
				width: 156rpx;
				margin-left: 16rpx;

				.cover {
					width: 156rpx;
					height: 156rpx;
        //   box-shadow: 0 4rpx 10rpx rgba(0,0,0,.1);
				}

				.ellipsis {
					max-width: 143rpx;
				}

        .new-technician {
          border-radius: 8rpx;
        }
			}

			.longbingbing-recommend-item.type-2 {
				width: 203rpx;
				height: 151rpx;
				background: #F4F6F7;
				border-radius: 12rpx;
				margin-left: 20rpx;

				.cover {
					width: 70rpx;
					height: 70rpx;
				}

				.ellipsis {
					max-width: 82rpx;
				}

				.iconyduixingxingshixin {
					font-size: 26rpx;
					background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
				}

				.star-text {
					height: 26rpx;
					color: #FF9519;
					margin-left: 6rpx;
				}

				.new-technician {
					width: 67rpx;
					height: 30rpx;
					border-radius: 8rpx;
					transform: rotateZ(360deg);
				}
			}


			.longbingbing-recommend-item.type-3 {
				width: 224rpx;
				margin-left: 16rpx;
				border-radius: 24rpx;

				.status-tag {
					min-width: 92rpx;
					height: 36rpx;
					padding: 0 10rpx;
					border-radius: 24rpx 0 24rpx 0;
					z-index: 1
				}

				.cover {
					width: 224rpx;
					height: 224rpx;
					display: block;
					border-radius: 24rpx 24rpx 0 0;
				}

				.ellipsis {
					max-width: 180rpx;
				}
			}

			.longbingbing-recommend-item:nth-child(1) {
				margin-left: 0;
			}

		}
	}
	.p-10 {
		padding: 10rpx;
	}
	.num {
		color: #000;
		// font-size: 20rpx;
		margin: 0 4rpx;
	}
	.huiyuan{
		color: #2D2D31 !important;
	}
	.huiyuanjiage{
		font-weight: bold;
	}
</style>
